<template>
  <!-- 登录页面最外部的大容器 -->
  <div class="login_container">
    <!-- 登录小窗体区域 -->
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/images/tx.jpg" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        class="login_form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            type="password"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <!-- 注册的链接 -->
          <el-link
            type="success"
            :underline="false"
            class="register"
            @click="register"
            >注册账户</el-link
          >
          <el-button type="primary" @click="login" @keyup.enter="login"
            >登录</el-button
          >
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      //   表单验证规则
      loginFormRules: {
        // 验证用户名
        username: [
          { required: true, message: '请输入登录用户名', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ],
        // 验证密码
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 重置
    resetLoginForm () {
      // 获取表单实例对象，对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.loginFormRef.resetFields()
    },
    // 登录
    login () {
      // 获取表单实例对象，对整个表单进行校验的方法，参数为一个回调函数，该回调函数会在校验结束后被调用
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          // 验证失败
          return ''
        } else {
          // 验证成功，调用api接口，第一个参数为请求的url，第二个参数为传入的参数（表单绑定对象的用户名、密码）
          const { data: res } = await this.$http.post('users/token', this.loginForm)
          // 判断用户是否存在
          if (res.meta.status === 401) {
            // 用户不存在
            this.$message.error('用户不存在，请先注册！')
          } else {
            // 用户存在，判断密码是否正确
            if (res.meta.status === 400) {
              // 用户存在，但密码错误
              this.$message.error('密码错误，登录失败！')
            } else {
              // 用户存在，且密码正确
              // 判断权限
              // 权限为1则为管理员，权限为2则为供货商，权限为3则为普通用户，普通用户提示禁止进入后台
              if (res.data.user.roleId === 1) {
                if (res.meta.status === 200 && res.data.user.isActived === true) {
                  // 登陆成功
                  this.$message.success('登录成功！')
                  // 登录成功之后获取token，并保存到客户端的sessionStorage中
                  window.sessionStorage.setItem('token', res.data.token)
                  // 将登录者的用户名存到sessionStorage中
                  window.sessionStorage.setItem('username', res.data.user.username)
                  // 将登录者的昵称存到sessionStorage中
                  window.sessionStorage.setItem('nickname', res.data.user.nickname)
                  // 将登录者的Id存到sessionStorage中
                  window.sessionStorage.setItem('uId', res.data.user.id)
                  // 利用编程式导航跳转到后台主页面
                  this.$router.push('/')
                } else if (res.data.user.isActived !== true) {
                  this.$message.error('该账号已被禁用，请联系超级管理员处理！')
                } else {
                  // 登陆失败
                  return this.$message.error('密码错误，登录失败！')
                }
              } else if (res.data.user.roleId === 2) {
                // 供货商
                if (res.meta.status === 200 && res.data.user.isActived === true) {
                  // 登陆成功
                  this.$message.success('登录成功！')
                  // 登录成功之后获取token，并保存到客户端的sessionStorage中
                  window.sessionStorage.setItem('token', res.data.token)
                  // 将登录者的用户名存到sessionStorage中
                  window.sessionStorage.setItem('username', res.data.user.username)
                  // 将登录者的昵称存到sessionStorage中
                  window.sessionStorage.setItem('nickname', res.data.user.nickname)
                  // 将登录者的Id存到sessionStorage中
                  window.sessionStorage.setItem('uId', res.data.user.id)
                  // 利用编程式导航跳转到后台主页面
                  this.$router.push('/')
                } else if (res.data.user.isActived !== true) {
                  this.$message.error('该账号已被禁用，请联系管理员处理！')
                } else {
                  // 登陆失败
                  return this.$message.error('密码错误，登录失败！')
                }
              } else {
                // 其余的权限为普通用户
                // 提示普通用户禁止进入后台
                this.$message.error('特朗普说了，这里面有你不能看的内容~')
              }
            }
          }
        }
      })
    },
    // 注册
    register () {
      // 编程式导航跳转到注册账号的页面
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="css" scoped>
/* 登录页面的大容器 */
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

/* 登录页面的登录小盒子 */
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 登录页面的头像盒子 */
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

/* 登录表单区域 */
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 登录页面按钮区域 */
.btns {
  display: flex;
  justify-content: flex-end;
}

/* 注册账户 */
.register {
  margin-right: 200px;
}
</style>
